<template>
  <div class="footer">
      <div class="logo" @click="changeTheme">
        <i class="el-icon-sunny" v-show="this.$store.getters.isSunny"></i>
        <i class="el-icon-moon" v-show="this.$store.getters.isMoon"></i>
        <span v-show="this.$store.getters.isSunny">Dream</span>
        <span v-show="this.$store.getters.isMoon">Fighting</span>
      </div>
      <!-- 友链 -->
      <p>
        友链：
        <a :href="item.url" target="_blank" v-for="(item,i) in list" :key="i">{{item.name}}</a>
      </p>
      <p>© 2020 LXJ. All rights reserved.</p>
      <p><a href="http://www.beian.miit.gov.cn" target="_blank">渝ICP备20004282号</a></p>
    </div>
</template>

<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data(){
        return {}
    },
    methods:{
        changeTheme() {
      this.$store.commit("changeIconTheme");
       },
    }
}

</script>
<style scoped lang="scss">
/* pc端样式 */
@media screen and (min-width: 1200px){
    .footer {
      text-align: center;
      color: rgb(133, 132, 131);
      .logo {
        margin: 0 auto;
        color: black;
        cursor: pointer;
        i {
          font-size: 20px;
        }
        span {
          font-size: 18px;
          font-weight: 600;
          padding-left: 18px;
        }
      }
      a {
        text-decoration: none;
        color: rgb(133, 132, 131);
      }
      a:hover {
        color: black;
      }
      p {
        font-size: 14px;
        a {
          padding: 5px;
          font-size: 14px;
        }
      }
    }
}

// 移动端样式
@media screen and (max-width: 768px){
    .footer {
      text-align: center;
      .logo {
        margin: 0 auto;
        color: black;
        cursor: pointer;
        i {
          font-size: 18px;
        }
        span {
          font-size: 18px;
          font-weight: 600;
          padding-left: 18px;
        }
      }
      a {
        text-decoration: none;
        color: rgb(133, 132, 131);
      }
      a:hover {
        color: black;
      }
      p {
        font-size: 12px;
        a {
          padding: 5px;
        }
      }
    }
}
</style>